<template>
	<div class="page-wrap">
		<!-- <div style="color: rgb(27, 76, 184);margin-bottom: 15px">
			<div class="addressIcon"></div>
			<span>当前位置：</span>
			<span style="cursor: pointer" @click="returnImage">{{typeName}}课件管理</span>
			<Icon type="ios-arrow-forward" color="rgb(27, 76, 184)" size="16" />
			<span style="color: #333">{{titleText}}</span>
		</div> -->
		<div class="page-content" :style="{height:contentHei}">
			<div class="img-header">
				<div style="font-weight: 700;font-size: 18px">{{titleText}}
					<!-- <RadioGroup v-if="!ecid" style="margin-left:40px;" v-model="formValidate.expType" type="button" button-style="solid" @on-change="changeExpType">
						<Radio :label="0">实操课件</Radio>
						<Radio :label="1">理论课件</Radio>
						<Radio :label="2">文本课件</Radio>
					</RadioGroup> -->
				</div>
			</div>
			<Divider />
			<div class="content-wrap">
				<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="120" style="width: 500px">
					<FormItem label="课件名称" prop="name">
						<Input v-model.trim="formValidate.name" placeholder='课件名称长度为1-64个字符,请输入中文、数字、字母、英文括号、下划线或者中划线'></Input>
					</FormItem>
					<FormItem label="方向" prop="direction">
						<i-select v-model="formValidate.direction" placeholder="方向" @on-change="changeDirection">
							<i-option v-for="(value,key) in expClassifyLevel1" :value="value.dictid" :key="key">{{value.dictname}}</i-option>
						</i-select>
					</FormItem>
					<FormItem label="类型" prop="type">
						<Select filterable v-model="formValidate.type" placeholder="类型">
							<Option v-for="(value,key) in expClassifyLevel2" :value="value.dictid" :key="key">{{value.dictname}}</Option>
						</Select>
					</FormItem>
					<FormItem label="标签" prop="labels">
						<Select filterable v-model="formValidate.labels" placeholder="标签" multiple :max-tag-count="1">
							<Option v-for="(value,key) in expClassifyTag" :value="value.dictname" :key="key">{{value.dictname}}</Option>
						</Select>
						<!-- <Button type="primary" ghost @click="selectExp">选择标签</Button> -->
						<Icon type="md-add" size="17" color="#a8a6c8"  @click="addLabelsModal = true"  class="add_icon"/>
						<!-- <span>
						<WarningTip content="只能添加一个标签，重复添加的话，会清空原来添加的标签" width="800"></WarningTip>
						</span> -->
						<Tag closable v-for="(item,index) in mergeLabels" :key="index" :title="item" @on-close="handleCloseTag(item)" class="flex width_150">{{ item }}</Tag>
					</FormItem>
					<FormItem label="课时" prop="hours">
						<InputNumber :min="1" :step="1" :max="999" v-model="formValidate.hours"></InputNumber>
					</FormItem>
					<FormItem label="难度" prop="difficulty">
						<RadioGroup v-model="formValidate.difficulty">
							<Radio label="Simple">简单</Radio>
							<Radio label="Medium">中等</Radio>
							<Radio label="Hard">较难</Radio>
						</RadioGroup>
					</FormItem>
					<FormItem label="可见范围" prop="public">
						<RadioGroup v-model="formValidate.public" @on-change="changePublic">
							<Radio label="1">单位</Radio>
							<Radio label="0">个人</Radio>
						</RadioGroup>
						<span v-if="!isCreate" style="color:#f90;position:absolute;white-space: nowrap;"> <Icon type="ios-information-circle-outline" />可见范围由个人修改为单位时，课件使用的个人资源(工程模板、指导书、视频、课件、图片、题目)的可见范围将变为单位</span>
					</FormItem>
					<FormItem label="是否自学" prop="selfType">
                        <RadioGroup v-model="formValidate.selfType">
                            <Radio :label="0">否</Radio>
                            <Radio :label="1">是</Radio>
                        </RadioGroup>
                    </FormItem>
					<FormItem label="工程模板" prop="envtempid" class="template-lable" v-if="formValidate.expType == 0">
						<Button type="primary" ghost @click="refreshTem()">选择</Button>
						<div class="chose-wrap" v-show="formValidate.envtempid">
							<div style="display: flex;justify-content: flex-start;align-items: center">
								<img src="../../assets/exper/template.png" class="chose-s-icon">
								<div class="chose-name">{{formValidate.envtempid}}</div>
							</div>
							<img src="../../assets/globalIcon/dis-del.png" style="width: 13px;height: 14px;cursor: pointer" @click="clearTemp">
						</div>
					</FormItem>
					<FormItem label="指导书类型" prop="customType" :class="{'template-lable': formValidate.expType == 0  ? true : false}" v-if="formValidate.expType != 2">
						<RadioGroup v-model="formValidate.customType" @on-change="changeGuideType">
								<Radio :label="0">数据</Radio>
								<Radio :label="1">文档类型</Radio>
						</RadioGroup>
					</FormItem>
					<FormItem label="指导书" prop="guide" :class="{'template-lable': formValidate.expType == 0  ? true : false}" v-if="formValidate.expType != 2">
						<Button type="primary" ghost @click="refreshFile()">选择</Button>
						<div class="chose-wrap" v-show="formValidate.guide">
							<div style="display: flex;justify-content: flex-start;align-items: center">
								<img src="../../assets/exper/guide.png" class="chose-s2-icon">
								<div class="chose-name">{{formValidate.guide}}</div>
							</div>
							<img src="../../assets/globalIcon/dis-del.png" style="width: 13px;height: 14px;cursor: pointer" @click="clearGuide">
						</div>
					</FormItem>
					<FormItem label="视频" prop="video" :class="{'template-lable': formValidate.expType == 1 ? true :false}" v-if="formValidate.expType != 2">
						<Button type="primary" ghost @click="searchFileName='';searchFilePublic='';videoPage=1;getVideoList('videos')">选择</Button>
						<div class="chose-wrap" v-show="expVideo != ''">
							<div style="display: flex;justify-content: flex-start;align-items: center">
								<img src="../../assets/exper/guide.png" class="chose-s2-icon">
								<div class="chose-name">{{expVideo.originName}}</div>
							</div>
							<img src="../../assets/globalIcon/dis-del.png" style="width: 13px;height: 14px;cursor: pointer" @click="clearVideo">
						</div>
					</FormItem>
					<FormItem label="课件" prop="video" :class="{'template-lable': formValidate.expType == 2 ? true :false}">
						<Button type="primary" ghost @click="searchFileName='';searchFilePublic='';videoPage=1;getVideoList('courseware')">选择</Button>
						<div class="chose-wrap" v-show="expDoc != ''">
							<div style="display: flex;justify-content: flex-start;align-items: center">
								<img src="../../assets/exper/guide.png" class="chose-s2-icon">
								<div class="chose-name">{{expDoc.originName}}</div>
							</div>
							<img src="../../assets/globalIcon/dis-del.png" style="width: 13px;height: 14px;cursor: pointer" @click="clearDoc">
						</div>
					</FormItem>
					<FormItem label="封面图片" prop="topology" v-show="showImgItem">
						<Button type="primary" ghost @click="searchFileName='';searchFilePublic='';videoPage=1;getVideoList('images')">选择</Button>
						<div class="chose-wrap" v-show="formValidate.topology != ''">
							<div style="display: flex;justify-content: flex-start;align-items: center">
								<!--<img src="../../assets/exper/guide.png" class="chose-s2-icon">-->
								<div class="chose-name">
									<img :src="handleImage(useImagePath)" style="display:inline-block;height:40px;width:auto;vertical-align: middle;">
								</div>
							</div>
							<img src="../../assets/globalIcon/dis-del.png" style="width: 13px;height: 14px;cursor: pointer" @click="clearImg">
						</div>
					</FormItem>
					<FormItem label="描述" prop="desc">
						<Input v-model.trim="formValidate.desc" type="textarea" :maxlength="200" :autosize="{minRows: 2,maxRows: 5}" placeholder="描述"></Input>
					</FormItem>
					<FormItem>
						<Button type="primary" @click="submitBtn('formValidate')" :loading="creatSceneLoading">确定</Button>
						<Button @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
					</FormItem>
				</Form>
			</div>
		</div>
		<!--工程模板-->
		<Drawer :closable="true" :mask-closable="false" width="1000" v-model="addDeviceModel" class="deviceDrawer">
			<div style="position: absolute;top: 70px;left: -17px;cursor: pointer" @click="closeDistribution">
				<!-- <img src="../../assets/globalIcon/closeIcon.png" alt="Close"> -->
				<img :src="drawerFolderImage" alt="Close" />
			</div>
			<div style="display: flex;justify-content: flex-start;align-items: center">
				<div style="height: 8px;width: 8px;border-radius: 50%;background-color: #333"></div>
				<div style="margin-left: 5px;font-size: 18px;font-weight: 700">请选择工程模板
					<ResourseUsageIllustrate type="课件"></ResourseUsageIllustrate>
				</div>
			</div>
			<div style="display: flex;justify-content: space-between;margin-top: 20px">
				<div style="margin-left: 15px;font-size: 14px;font-weight: bold">工程模板</div>
				<div>
					<i-select clearable placeholder="可见范围" v-model="selectProTemModel" style="width: 150px;margin-left: 15px;" @on-change="changeTemplate">
						<i-option value="range">平台</i-option>
						<i-option value="system">系统</i-option>
						<i-option value="company">单位</i-option><i-option value="person">个人</i-option>
					</i-select>
					<Input v-model.trim="searchTemNameInput" placeholder="模板名称" clearable @on-change="searchTemNameBtn" style="width: 180px;margin-left: 15px;" />
					<Button class="header-btn" type="primary" ghost style="height: 32px;margin-left: 5px;" @click="refreshTem()"><i class="el-icon-refresh-right" /></Button>

				</div>
			</div>
			<Divider />
			<div>
				<Table border :columns="templateCol" :data="templateList" :loading="proTemLoading" :max-height="setUserTableHei"></Table>
				<div style="display: flex;justify-content: center;margin: 15px 0">
					<Page :total=templateTotal :page-size="templatePageSize" :current="templatePage" show-total show-elevator @on-change="temOnChange" />
				</div>
			</div>
		</Drawer>
		<!--指导书-->
		<Drawer :closable="true" :mask-closable="false" width="1000" v-model="guideModal" class="deviceDrawer">
			<div style="position: absolute;top: 70px;left: -17px;cursor: pointer" @click="closeGuideModalBtn">
				<!-- <img src="../../assets/globalIcon/closeIcon.png" alt="Close"> -->
				<img :src="drawerFolderImage" alt="Close" />
			</div>
			<div style="display: flex;justify-content: flex-start;align-items: center">
				<div style="height: 8px;width: 8px;border-radius: 50%;background-color: var(--url-color)"></div>
				<div style="margin-left: 5px;font-size: 18px;font-weight: 700">请选择指导书
					<ResourseUsageIllustrate type="课件"></ResourseUsageIllustrate>
				</div>
			</div>
			<div style="display: flex;justify-content: space-between;margin-top: 20px">
				<div style="margin-left: 15px;font-size: 14px;font-weight: bold">指导书</div>
				<div>
					<i-select clearable v-model="shareStatus" placeholder="可见范围" style="width: 150px;margin-left: 15px" @on-change="changeType">
						<i-option value="2">系统</i-option>
						<i-option value="1">单位</i-option>
						<i-option value="0">个人</i-option>
					</i-select>
					<Input v-model.trim="searchGuideInput" placeholder="指导书名称" clearable @on-change="searchGuideBtn" style="width: 180px;margin-left: 15px;" />
					<Button class="header-btn" type="primary" ghost style="height: 32px;margin-left: 5px;" @click="refreshFile()"><i class="el-icon-refresh-right" /></Button>

				</div>
			</div>
			<Divider />
			<div>
				<Table border :columns="expGuideListCol" :data="expGuideList" :loading="guideLoading" :max-height="setUserTableHei"></Table>
				<div style="display: flex;justify-content: center;margin: 15px 0">
					<Page :total=expGuideTotal :page-size="expGuidePageSize" :current="expGuidePage" show-total show-elevator @on-change="guideOnChange" />
				</div>
			</div>
		</Drawer>
		<!--图片列表-->
		<Drawer :closable="true" :mask-closable="false" width="1000" v-model="imgModal" class="deviceDrawer">
			<div style="position: absolute;top: 70px;left: -17px;cursor: pointer" @click="closeImgModalBtn">
				<!-- <img src="../../assets/globalIcon/closeIcon.png" alt="Close"> -->
				<img :src="drawerFolderImage" alt="Close" />
			</div>
			<div style="display: flex;justify-content: flex-start;align-items: center">
				<div style="height: 8px;width: 8px;border-radius: 50%;background-color: #333"></div>
				<div style="margin-left: 5px;font-size: 18px;font-weight: 700">请选择{{imgDrawerTitle}}
					<ResourseUsageIllustrate type="课件"></ResourseUsageIllustrate>
				</div>
			</div>
			<div style="display: flex;justify-content: space-between;margin-top: 20px">
				<div style="margin-left: 15px;font-size: 14px;font-weight: bold">{{imgDrawerTitle}}</div>
				<div>
					<i-select clearable v-model="searchFilePublic" placeholder="可见范围" style="width: 150px;margin-left: 15px" @on-change="searchFile">
						<i-option value="range">平台</i-option>
						<i-option value="system">系统</i-option>
						<i-option value="company">单位</i-option><i-option value="person">个人</i-option>
					</i-select>
					<Input v-model.trim="searchFileName" :placeholder="imgDrawerSearchPlaceholder" style="width: 180px;" clearable @on-change="searchFile" />
					<Button class="header-btn" type="primary" ghost style="height: 32px;margin-left: 5px;" @click="refreshImg()"><i class="el-icon-refresh-right" /></Button>

				</div>
			</div>
			<Divider />
			<div>
				<Table border :columns="getShowVideoCol()" :data="videoList" :loading="fileListLoading" :max-height="setUserTableHei"></Table>
				<div style="display: flex;justify-content: center;margin: 15px 0">
					<Page :total='videoTotal' :page-size="videoPageSize" :current="videoPage" show-total show-elevator @on-change="videoOnChange" />
				</div>
			</div>
		</Drawer>

		<!-- 添加标签 -->
		 <Modal
        v-model="addLabelsModal"
        title="添加标签"
        @on-ok="submitLabels"
        @on-cancel="cancelLabels">
        <Input v-model.trim="addLabels" placeholder="请输入标签" style="width: 95%;"/>
				 <WarningTip content="请输入个数为1-64的字符"></WarningTip>
				 <div slot="footer">
            <Button @click="cancelLabels" type="text">取消</Button>
            <Button @click="submitLabels" type="primary" :disabled="!addLabels">确定</Button>
        </div>
    </Modal>
		<!-- 添加标签 -->
		 <Modal
        v-model="addExpModal"
        title="添加标签"
        @on-ok="submitLabelsSave"
        @on-cancel="cancelLabelsSave">
				<!-- <Select filterable v-model="formValidate.labels" placeholder="标签" multiple :max-tag-count="1" style="width: 470px;">
						<Option v-for="(value,key) in expClassifyTag" :value="value.dictname" :key="key">{{value.dictname}}</Option>
				</Select> -->
        <div style="margin-top:20px;width: 470px;display: flex;">
					<Input v-model.trim="addLabels" placeholder="请输入标签" :maxlength="64"/>
					<Button type="primary" ghost style="margin-left:10px" @click="submitLabels">添加</Button>
				</div>
    </Modal>
	</div>
</template>
<script>
	import $ from 'jquery'
	import encryption from '@/libs/encryption.js'
	import {experType,getSelLabelType,dictEntrysSave,dictEntrysSaveBatch} from '@/api/dict.js'
	import {
		submitExper,
		modifyExper,
		experimentDetail
	} from '@/api/selfStudy/courseExp.js'
	import {
		getTemplateData,
		getTempInfpByID
	} from '@/api/proTemplate.js'
	import {
		getGuideData,
		getGuideInfoByID,
		getGuideInfoByID_new
	} from '@/api/guide.js'
	import defaultImg from '@/assets/globalIcon/course.jpg'
	//  import {imgList} from '@/api/guide.js'
	import{addExpVideo,delExpVideo,modifyExpVideo,clearExpVideo,getVideoDetail} from '@/api/selfStudy/courseExp.js'
	import {
		getFilesData
	} from '@/api/uploadFile.js'
	import { escape2Html } from '@/libs/utils'
	import ResourseUsageIllustrate from '@/components/resourse-usage-illustrate'
	import { validateName } from '@/libs/reg'
	 import common from '@/mixin/common'
	import { mapState } from 'vuex';
	export default {
		name:'CreateExper',
		components: {ResourseUsageIllustrate},
		mixins:[common],
		data() {
			const validateHour = (rule, value, callback) => {
				let val = parseInt(value)
				if(val > 0 && val <= 999) {
					callback()
				} else {
					callback(new Error('请输入时长为1——999'))
				}
			}
			const validateTemId = (rule, value, callback) => {
			}
			return {
				addExpModal:false,
				// 用户信息
				userName: '',
				USER_ID: '',
				videoCopys:[],
				// 页面设置
				defaultImg,
				fullHeight: document.documentElement.clientHeight,
				fullWidth: document.documentElement.clientWidth,
				contentHei: 'auto',
				upLoadIconUrl: `${this.baseURL}/virtual/icon/fileUpload`,
				typeName:'',
				// 先判断状态
				isCreate: true,
				receiveData: {},
				showImgItem: true,
				ecid: '',
				// 页面标题
				titleText: '',
				// 表单
				formValidate: {
					"selfType": 0,
					name: '',
					direction:'',
					type: '',
					labels:[],
					hours: 1,
					difficulty: 'Simple',
					public: '1',
					desc: '',
					envtempid: '',
					guide: '',
					topology: '',
					expType: 0, //0.实操课件 、1.理论课件、2.文本课件 ,
					customType:0 //0.数据、1.文档文件
				},
				ruleValidate: {
					name: [{
						required: true,
						max: 64,
						message: '课件名称长度为1—64个字符',
						trigger: 'change'
					}, {
						validator: validateName,
						trigger: 'change'
					}],
					type: [{
						required: true,
						message: '类型不能为空',
						trigger: 'change'
					}],
					direction: [{
						required: true,
						message: '方向不能为空',
						trigger: 'change'
					}],
					//  labels: [
          //             { required: true,  type:'array',min:1,message: '标签不能为空', trigger: 'change' }
          //           ],
					hours: [{
						required: true,
						validator: validateHour,
						trigger: 'change'
					}, ],
					difficulty: [{
						required: true,
						message: '难度不能为空',
						trigger: 'change'
					}],
					public: [{
						required: true,
						message: '可见范围不能为空',
						trigger: 'change'
					}],
					selfType: [
                        { required: true, message: '是否自学不能为空', type: 'number', trigger: 'change' }
                    ],
					// envtempid: [
					//     { required: true, validator: validateTemId, trigger: 'change' }
					// ],
					// guide: [
					//     { required: true, message: 'The guide cannot be empty', trigger: 'change' }
					// ],
					expType: [{
						required: true,
						type: 'number',
						message: '类型不能为空',
						trigger: 'change'
					}],
					// customType:[{
					// 	required:true,
					// 	type:'number',
					// 	message:'指导书类型不能为空',
					// 	trigger:'change'
					// }],
					desc: [{
						max: 200,
						message: '描述不能超过200个字符',
						trigger: 'change'
					}, ],
				},
				creatSceneLoading: false,
				useExpguideId: '',
				useTemplateId: '',
				useImagePath: '',
				// 课件分类
				expClassify: [],
				expClassifyLevel1: [],
				expClassifyLevel2: [],
				// 标签
				expClassifyTag:[],
				// 工程模板
				addDeviceModel: false,
				templatePage: 1,
				templatePageSize: 14,
				templateTotal: 0,
				templateList: [],
				templateCol: [{
					type: 'index',
					width: 60,
					align: 'center',
				}, {
					title: '模板名称',
					key: 'name',
					align: 'center'
				}, {
					title: '可见范围',
					key: 'visibility',
					width: 100,
					align: 'center',
					render: (h, params) => {
						return h('div', {
							style: {
								color: this.handlePublic(params.row.visibility).color
							}
						}, this.handlePublic(params.row.visibility).text)
					}
				},  {
					title: '描述',
					key: 'description',
					align: 'center',
					render: (h, params) => {
						return h('span',params.row.description || '-')
					}
				}, {
					title: '创建者',
					key: 'creatorName',
					width: 170,
					align: 'center',
				},{
					title: '创建时间',
					key: 'created',
					width: 170,
					align: 'center',
				}, {
					title: '操作',
					key: 'action',
					align: 'center',
					width: 120,
					render: (h, params) => {
						let text = ''
						if(params.row.tempUserFlag) {
							text = '已用'
						} else {
							text = '使用'
						}
						let status = this.getResourceDisStatus(params.row.visibility === 'private',params.row.creator)
//						(this.formValidate.public == 1 || !this.isOwn) && params.row.visibility == 'private'
						return h('a', {
							style: {
//								'display': 'flex',
//								'justify-content': 'flex-start',
//								'align-items': 'center',
								color: params.row.tempUserFlag ? '#2f70ff' : 'grey',
								cursor:status ? 'not-allowed' : 'pointer'
							},
						}, [
							h('div', {
								on: {
									'click': () => {
										if(status){
											//this.$Message.warning('单位的课件不允许选择个人资源');
                                        	return; 
										}
										this.chooseTemp(params)
									},
								},
								style: {
//									'margin-left': '15px',
								}
							}, [
								h('img', {
									attrs: {
										src: params.row.tempUserFlag ? require('../../assets/globalIcon/choosed.png') : require('../../assets/globalIcon/add.png'),
									},
									style: {
										'margin-right': '5px',
										'vertical-align': 'middle',
										width: '16px',
										height: '16px',
										display: 'inline-block',
									},
								}),
								h('span', {}, text)
							])
						])
					}
				}, 
				],
				searchTemplateName: '',
				proTemLoading: false,
				searchTemNameInput: '',
				selectProTemModel: '',
				templateVisibility: '',
				setUserTableHei: '700',
				// 说明指导书
				guideModal: false,
				guideLoading: false,
				expGuideList: [],
				expGuidePage: 1,
				expGuidePageSize: 14,
				expGuideTotal: 0,
				expGuideListCol: [{
					type: 'index',
					width: 60,
					align: 'center',
				}, {
					title: '名称',
					key: 'guidbookname',
					align: 'center',
				}, {
					title: '可见范围',
					key: 'ispublic',
					align: 'center',
					render: (h, params) => {
						return h('div', {
							style: {
								color: this.handlePublic(params.row.ispublic).color
							}
						}, this.handlePublic(params.row.ispublic).text)
					}
				}, {
					title: '创建者',
					key: 'createuser',
					align: 'center',
				}, {
					title: '最近一次更新时间',
					key: 'updatetime',
					align: 'center',
					sortable: true,
				}, {
					title: '操作',
					key: 'action',
					align: 'center',
					render: (h, params) => {
						let text = ''
						if(params.row.guideUserFlag) {
							text = '已用'
						} else {
							text = '使用'
						}
						let status = this.getResourceDisStatus(params.row.ispublic === 0,params.row.designer)
//						(this.formValidate.public == 1 || !this.isOwn) && (params.row.ispublic === 0 || params.row.ispublic === '0')
						return h('a', {
							style: {
//								'display': 'flex',
//								'justify-content': 'flex-start',
//								'align-items': 'center',
								color: params.row.guideUserFlag ? '#2f70ff' : 'grey',
								cursor:status ? 'not-allowed' : 'pointer'
							},
						}, [
							h('div', {
								on: {
									'click': () => {
										if(status){
											//this.$Message.warning('单位的课件不允许选择个人资源');
                                        	return; 
										}
										this.chooseGuide(params)
									},
								},
								style: {
//									'margin-left': '15px',
								}
							}, [
								h('img', {
									attrs: {
										src: params.row.guideUserFlag ? require('../../assets/globalIcon/choosed.png') : require('../../assets/globalIcon/add.png'),
									},
									style: {
										'margin-right': '5px',
										'vertical-align': 'middle',
										width: '16px',
										height: '16px',
										display: 'inline-block',
									},
								}),
								h('span', {}, text)
							])
						])
					}
				}, ],
				searchGuideInput: '',
				shareStatus: 'all',
				// 图片
				imgModal: false,
				videoPage: 1,
				videoPageSize: 14,
				videoList: [],
				videoTotal: 0,
				videoCol: [{
					title: '名称',
					key: 'originName',
					align: 'center',
					// render:(h,params)=>{
					//     let fileName = params.row.originName
					//     fileName = fileName.split('.')[0]
					//     return h('div',fileName)
					// }
				}, {
					title: '缩略图',
					key: 'path',
					align: 'center',
					render: (h, params) => {
						return h('img', {
							attrs: {
								src: this.handleImage(params.row.path)
							},
							style: {
								display: 'inline-block',
								maxHeight: '40px',
								width: 'auto',
								verticalAlign: 'middle'
							}
						})
					}
				}, {
					title: 'ID',
					key: 'id',
					align: 'center',
				}, 
//				{
//					title: '类型',
//					key: 'bucket',
//					align: 'center',
//					width: 80,
//				}, 
				{
					title: '可见范围',
					key: 'visibility',
					width: 100,
					align: 'center',
					render: (h, params) => {
						return h('div', {
							style: {
								color: this.handlePublic(params.row.visibility).color
							}
						}, this.handlePublic(params.row.visibility).text)
					}
				},{
					title: '内容',
					key: 'check',
					align: 'center',
					width: 100,
					render: (h, params) => {
						return h('div', [
							h('a', {
								on: {
									click: () => {
										this.checkInfo(params);
									}
								}
							}, '查看')
						]);
					}
				}, {
					title: '创建者',
					key: 'creatorName',
					align: 'center',
				}, {
					title: '创建时间',
					key: 'created',
					align: 'center',
				}, {
					title: '操作',
					key: 'action',
					width: 100,
					align: 'center',
					render: (h, params) => {
						let text = ''
						if(params.row.imgUseFlag) {
							text = '已用'
						} else {
							text = '使用'
						}
						let status = this.getResourceDisStatus(params.row.visibility === 'private',params.row.creator);
//						(this.formValidate.public == 1 || !this.isOwn) && params.row.visibility == 'private'
						return h('a', {
							style: {
//								'display': 'flex',
//								'justify-content': 'flex-start',
//								'align-items': 'center',
								color: params.row.imgUseFlag ? '#2f70ff' : 'grey',
								cursor:status ? 'not-allowed' : 'pointer'
							},
						}, [
							h('div', {
								on: {
									'click': () => {
										if(status){
											//this.$Message.warning('单位的课件不允许选择个人资源');
                                        	return; 
										}
										this.chooseImg(params)
									},
								},
								style: {
//									'margin-left': '15px',
								}
							}, [
								h('img', {
									attrs: {
										src: params.row.imgUseFlag ? require('../../assets/globalIcon/choosed.png') : require('../../assets/globalIcon/add.png'),
									},
									style: {
										'margin-right': '5px',
										'vertical-align': 'middle',
										width: '16px',
										height: '16px',
										display: 'inline-block',
									},
								}),
								h('span', {}, text)
							])
						])
					}
				}, 
				],
				fileListLoading: false,
				searchFileName: '',
				searchFilePublic:'',
				//课件视频/课件
				expVideo: '',
				expDoc: '',
				imgDrawerTitle: '',
				imgDrawerSearchPlaceholder: '',
				addLabels: '',
				addLabelsModal: false,
				addLabelsArr: [],
				mergeLabels:[],
				expClassifyName:[]
			}
	},
	watch: {
		'formValidate.labels': {
			handler (val) {
				this.mergeLabels = [...new Set(this.formValidate.labels.concat(this.addLabelsArr))]
			},
			deep:true
		},
		addLabelsArr: {
			handler (val) {
				this.mergeLabels = [...new Set(this.formValidate.labels.concat(this.addLabelsArr))]
			},
			deep: true,
			immediate:true,
		},
		mergeLabels: {
			handler (val) {

			},deep:true
		}
	},
		computed:{
        	isOwn:function(){ //是否是自己的（修改别人的课件不允许选择个人资源）
        		return (this.USER_ID == this.formValidate.createUserId) || this.isCreate 
        	},
					...mapState('style', {
            "drawerFolderImage": ({ themeConfig }) => {
                return themeConfig.drawerFolderImage
            }
        })
			},
		created() {
			// 获取用户id
			let November = sessionStorage.getItem('November')
			November = JSON.parse(encryption.SelfUseDecrypt(November))
			this.USER_ID = November.userId
			this.userName = November.userName
			const typeMap = {
				0:'实操',
				2:'课件',
				1:'视频'
			}
			this.typeName = typeMap[this.$route.query.type];
			this.formValidate.expType = this.$route.query.type;
		},
		mounted() {
			this.classification().then(() => {
				// 是创建还是修改
				if(this.$route.query.action === 'create') {
					this.isCreate = true
					this.titleText = `创建${this.typeName}`
					this.showImgItem = true
				} else if(this.$route.query.action === 'modify') {
					this.isCreate = false
					this.titleText = `修改${this.typeName}`
					this.showImgItem = true
					this.ecid = this.$route.query.ecid
					// 获取课件详情
					this.getExpInfo()
				}
				this.addBreadItem({ name: this.titleText });
			});
			this.getSelLabelType()
			this.setStyle()
			window.onresize = () => {
				this.setStyle()
			}
		},
		beforeRouteLeave(to, from, next) {
			if(to.path === '/experiment') {
				//to.query.page = this.$route.query.page
				next()
			} else {
				//跳转至非课件页面，清空存储的查询条件
				sessionStorage.removeItem("queryObj");
				next()
			}
		},
	methods: {
		// 
		selectExp () {
			this.addExpModal= true
		},
		submitLabelsSave(){},
		cancelLabelsSave(){},
		submitLabels () {
			// let arr2 = new Set(this.addLabelsArr) // 去重
			if (this.addLabels == '') { 
				this.addLabels = ''
				return
			}
				// 这里是可以多加标签和去除重复
			if (this.expClassifyName.includes(this.addLabels) || this.mergeLabels.includes(this.addLabels) || this.addLabelsArr.includes(this.addLabels)) {
				this.$Message.warning({
					content: `输入值${this.addLabels}重复数据，请重新输入！`,
					duration: 3
				})
				// this.addLabels = ''
			} else {
				this.addLabelsArr.push(this.addLabels)
				this.addLabels = ''
				this.addLabelsModal = false
			}
		},
		cancelLabels () {
			this.addLabels = ''
			this.addLabelsModal = false
		},
		handleCloseTag (item) { // 合拼数组问题，要对应处理对应的数组
			// let index = this.mergeLabels.indexOf(item)
			let addLabelsIndex = this.addLabelsArr.indexOf(item)
			let formIndex = this.formValidate.labels.indexOf(item)
			if (formIndex > -1) {
				this.formValidate.labels.splice(formIndex,1)
			}
			if (addLabelsIndex > -1) {
				this.addLabelsArr.splice(addLabelsIndex,1)
			}
			// if (index > -1) {
			// 	this.mergeLabels.splice(index, 1)
			// }
		},
			// 设置高度
			setStyle() {
				window.fullHeight = document.documentElement.clientHeight;
				window.fullWidth = document.documentElement.clientWidth;
				this.fullHeight = window.fullHeight;
				this.fullWidth = window.fullWidth;
				this.contentHei = this.fullHeight - 60 - 21 + 'px' // 80是头部高度  60是上下padding
				this.setUserTableHei = this.fullHeight - 212
				this.templatePageSize = Math.floor(this.setUserTableHei / 50) - 1
				this.expGuidePageSize = Math.floor(this.setUserTableHei / 50) - 1
				this.videoPageSize = Math.floor(this.setUserTableHei / 50) - 1
			},
			// 返回课件列表
			returnImage() {
				const name = this.typeName=='课件'?'coursewareExp':this.typeName=='视频'?'videoExp':'experiment'
				this.$router.push({
					name: name,
					query: {
						page: this.$route.query.page
					}
				})
			},
			changeGuideType(val){
				if(val){//文件File
					if(this.preGuideIdFile){
						this.useExpguideId = this.preGuideIdFile;
						this.formValidate.guide = this.preGuideNameFile
					}else{
						this.useExpguideId = '';
						this.formValidate.guide = ''
					}
				}else{
					if(this.preGuideIdData){
						this.useExpguideId = this.preGuideIdData;
						this.formValidate.guide = this.preGuideNameData
				}else{
						this.useExpguideId = '';
						this.formValidate.guide = ''
				}
				}
				
			},
			// 获取课件详情 回显数据
			getExpInfo() {
				let params = {
					eid: this.ecid,
				}
				experimentDetail(params)
					.then(data => {
						if(data.code === 1) {
							let getData = data.data
							this.receiveData = getData
							this.formValidate.selfType = getData.selfType || 0
							this.formValidate.name = escape2Html(getData.ecname)
							this.formValidate.difficulty = getData.difficulty
							this.formValidate.desc = escape2Html(getData.description)
							this.formValidate.hours = getData.hours
							this.formValidate.type = getData.typeCode
							let direction = this.getDirection(getData.typeCode)
							this.expClassifyLevel2 = this.expClassify.filter(dict => dict.parentid == direction);
							this.formValidate.direction = direction
							this.formValidate.expType = getData.expType
							this.formValidate.customType =getData.customType? parseInt(getData.customType) : 0
							this.formValidate.public = getData.isPublic
							this.formValidate.topology = getData.topology
							this.formValidate.createUserId = getData.createUserId
							this.useImagePath = getData.topology;
							this.useExpguideId = getData.guide;
							if (getData.labels) {
								let result = this.getLabelsSet(this.expClassifyTag, getData.labels.split(';'))
								this.formValidate.labels = result.select
								// this.addLabelsArr = result.input // 取消下拉框没有数据时，也不回显给创建输入框
							}
							if(this.formValidate.customType){
								this.preGuideIdFile = this.useExpguideId;
								this.preGuideNameFile = this.formValidate.guide;
							}else{
								this.preGuideIdData = this.useExpguideId;
								this.preGuideNameData = this.formValidate.guide;
							}
							this.useTemplateId = getData.envTempId;
							if(getData.expType == 0) {
								// 查询指导书
								if(!this.formValidate.customType){//0 不变
									this.queryGuideByID(this.useExpguideId)
								}else{
									this.formValidate.guide = getData.reportTemplate
								}
									// 查询工程模板
								this.querytempByID(this.useTemplateId)
									//查询课件视频和课件信息
								this.getExpVideoOrDocList();
							} else if(getData.expType == 1) {
								//查询课件视频和课件信息
								this.getExpVideoOrDocList();
								// 查询指导书
								if(this.useExpguideId){
									this.queryGuideByID(this.useExpguideId)
								}
							} else if(getData.expType == 2) {
								//查询课件课件信息
								this.getExpVideoOrDocList();
							}
						} else {
							this.$Message.error({
								content: data.message,
								duration: 3,
							})
						}
					})
					.catch(err => {
					})
		},
		getLabelsSet (data1, data2) {
			let result = {
				select: [],
				input: []
			}
			data2.forEach(item2 => {
				data1.forEach(item => {
					if (item2 !== item.dictname) {
						result.input.push(item2)
					} else {
						result.select.push(item2)
					}
				})
			})
			result.input =[ ...new Set(result.input)]
			result.select = [...new Set(result.select)]
			return result;
		},
			getDirection(type){
				let types = this.expClassify.filter(dict => dict.dictid == type);
				if(types.length > 0){
					let parentTypes = this.expClassify.filter(dict => dict.dictid == types[0].parentid);
					return parentTypes.length > 0 ? parentTypes[0].dictid : ''
				}else{
					return ''
				}
			},
			getResourceDisStatus(isPrivate,creator){
				let isNotOwn = !(this.USER_ID == this.formValidate.createUserId || this.isCreate); 
				let isNotCommonCreator = this.formValidate.createUserId !== creator && !this.isCreate;
				return (this.formValidate.public == 1 || (isNotOwn && isNotCommonCreator)) && isPrivate
			},
			// 提交按钮
			submitBtn(name) {
				if(this.isCreate) {
					this.submitExpSceneBtn(name)
				} else {
					this.modifySubmit(name)
				}
				if (this.addLabelsArr.length > 0) {
					this.dictEntrysSave()
				}
		},
		// 保存标签
		dictEntrysSave () {
			let name = this.addLabelsArr[0]
			if (this.addLabelsArr.length == 1) { // 单个数据保存
				let res = dictEntrysSave(name)
				console.log('dictEntrysSave ~ res', res)
			} else {
				let result = dictEntrysSaveBatch(this.addLabelsArr)
				console.log('dictEntrysSave ~ result', result)
			}
		},
			// 创建提交
			submitExpSceneBtn(name) {
				this.$refs[name].validate((valid) => {
					if(valid) {
						let formData = {};
						formData.ecname = this.formValidate.name;
						formData.difficulty = this.formValidate.difficulty;
						formData.description = this.formValidate.desc;
						formData.hours = this.formValidate.hours;
						formData.guide = this.useExpguideId;
						formData.typeCode = this.formValidate.type;
						formData.isPublic = this.formValidate.public;
						// formData.labels = 'null';
						// formData.labels = this.formValidate.labels.join(';');
						if (this.mergeLabels.length > 0 || this.formValidate.labels.length > 0) {
							formData.labels = this.mergeLabels.join(';');
						} else {
							formData.labels = ''
						}
						formData.vmCount = '0';
						formData.envTempId = this.useTemplateId;
						formData.srcId = '';
						formData.topology = this.useImagePath;
						formData.expType = this.formValidate.expType;
						formData.customType = this.formValidate.customType;
						formData.selfType = this.formValidate.selfType;
						// 分界线
						formData.reportTemplate = '';
						formData.usedTimes = '0';
						formData.createUserId = this.USER_ID;
						formData.testingResult = '0';
						formData.testingUser = '';
						formData.isTested = '1';
						formData.designer = this.userName;
						formData.filePath = '';
						formData.testingtime = '';
						formData.userName = this.userName;
						if(formData.customType){
							formData.reportTemplate = this.formValidate.guide
						}
						if(formData.envTempId === '' && formData.expType == 0) {
							this.$Message.error({
								content: '请选择一个工程模板',
								duration: 3,
							})
							return false
						} else if(formData.guide === '' && formData.expType == 0) {
							this.$Message.error({
								content: '请选择一个指导书',
								duration: 3,
							})
							return false
						} else if(this.expVideo == '' && formData.expType == 1) {
							this.$Message.error({
								content: '请选择一个视频',
								duration: 3,
							})
							return false
						} else if(this.expDoc == '' && formData.expType == 2) {
							this.$Message.error({
								content: '请选择一个课件',
								duration: 3,
							})
							return false
						}
						this.creatSceneLoading = true
						console.log('===formData',formData);
						submitExper(formData)
							.then((data) => {
								if(data.code == 1) {
									this.ecid = data.data.ecId;
									if(!this.expDoc && !this.expVideo) {
										this.$Message.success({
											content: '创建成功！',
											duration: 3,
										});
										setTimeout(() => {
											this.returnImage()
										})
									} else if(this.expDoc && this.expVideo) {
										Promise.all([this.saveExperOrDocInfo('EduPdf'), this.saveExperOrDocInfo('EduVideo')]).then(data => {
											this.$Message.success({
												content: '创建成功！',
												duration: 3,
											});
											setTimeout(() => {
												this.returnImage()
											})
										})
									} else if(this.expDoc) {
										this.saveExperOrDocInfo('EduPdf').then(data => {
											if(data) {
												this.$Message.success({
													content: '创建成功！',
													duration: 3,
												});
												setTimeout(() => {
													this.returnImage()
												})
											}
										});
									} else if(this.expVideo) {
										this.saveExperOrDocInfo('EduVideo').then(data => {
											if(data) {
												this.$Message.success({
													content: '创建成功！',
													duration: 3,
												});
												setTimeout(() => {
													this.returnImage()
												})
											}
										});
									}
									this.addLabelsArr = []
								} else {
									this.$Message.error({
										content: data.message,
										duration: 3,
									})
								}
								this.creatSceneLoading = false
							})
							.catch((err) => {
								this.creatSceneLoading = false
							})
					} else {
						this.$Message.error('请完善信息!');
					}
				})
			},
			// 修改提交
			modifySubmit(name) {
				this.$refs[name].validate((valid) => {
					if(valid) {
						this.receiveData.selfType = this.formValidate.selfType;
						this.receiveData.ecname = this.formValidate.name;
						this.receiveData.typeCode = this.formValidate.type;
						this.receiveData.hours = parseInt(this.formValidate.hours);
						this.receiveData.difficulty = this.formValidate.difficulty;
						this.receiveData.isPublic = parseInt(this.formValidate.public);
						this.receiveData.description = this.formValidate.desc;
						this.receiveData.guide = this.useExpguideId
						this.receiveData.envTempId = this.useTemplateId
						this.receiveData.topology = this.useImagePath;
						this.receiveData.expType = this.formValidate.expType;
						this.receiveData.customType = this.formValidate.customType;
						if (this.mergeLabels.length > 0 || this.formValidate.labels.length > 0 ) {
							this.receiveData.labels = this.mergeLabels.join(';');
						} else {
							this.receiveData.labels = ''
						}
						if(this.receiveData.customType){
							this.receiveData.reportTemplate = this.formValidate.guide
						}
						if(this.receiveData.envTempId === '' && this.receiveData.expType == 0) {
							this.$Message.error({
								content: '请选择一个工程模板',
								duration: 3,
							})
							return false
						} else if(this.receiveData.guide === '' && this.receiveData.expType == 0) {
							this.$Message.error({
								content: '请选择一个指导书',
								duration: 3,
							})
							return false
						} else if(this.expVideo == '' && this.receiveData.expType == 1) {
							this.$Message.error({
								content: '请选择一个视频',
								duration: 3,
							})
							return false
						} else if(this.expDoc == '' && this.receiveData.expType == 2) {
							this.$Message.error({
								content: '请选择一个课件',
								duration: 3,
							})
							return false
						}
						this.creatSceneLoading = true
						console.log('==== this.receiveData', this.receiveData);
						modifyExper(this.receiveData.ecid, this.receiveData)
							.then(data => {
								if(data.code == 1) {
									if((!this.expDoc && this.curSaveExpDoc) || (!this.expVideo && this.curSaveExpVideo)) { //存在删除的情况，先清空
										this.clearExpVideo().then(data => {
											this.curSaveExpVideo = '';
											this.curSaveExpDoc = '';
											if(data) {
												if(!this.expDoc && !this.expVideo) {
													this.$Message.success({
														content: '修改成功！',
														duration: 3,
													});
													setTimeout(() => {
														this.returnImage()
													})
												} else {
													if(this.expVideo) {
														this.saveExperOrDocInfo('EduVideo').then(data => {
															this.$Message.success({
																content: '修改成功！',
																duration: 3,
															});
															setTimeout(() => {
																this.returnImage();
															}, 1000)
														});
													}
													if(this.expDoc) {
														this.saveExperOrDocInfo('EduPdf').then(data => {
															this.$Message.success({
																content: '修改成功！',
																duration: 3,
															});
															setTimeout(() => {
																this.returnImage();
															}, 1000)
														});
													}
												}
											}
										})
									} else if(this.expDoc || this.expVideo) {
										let proArr = [];
										if(this.expDoc && this.expVideo) {
											proArr = [this.saveExperOrDocInfo('EduPdf'), this.saveExperOrDocInfo('EduVideo')]
										} else if(this.expDoc) {
											proArr = [this.saveExperOrDocInfo('EduPdf')]
										} else if(this.expVideo) {
											proArr = [this.saveExperOrDocInfo('EduVideo')]
										}
										Promise.all([proArr]).then(data => {
											this.$Message.success({
												content: '修改成功！',
												duration: 3,
											});
											setTimeout(() => {
												this.returnImage();
											}, 1000)
										})
									} else {
										this.$Message.success({
											content: '修改成功！',
											duration: 3,
										});
										setTimeout(() => {
											this.returnImage();
										}, 1000)
									}
									this.addLabelsArr = []
								} else {
									this.$Message.error({
										content: data.message,
										duration: 3,
									});
								}
								this.creatSceneLoading = false
							})
							.catch(err => {
								this.creatSceneLoading = false
							})
					} else {
						this.$Message.error('请完善信息!');
					}
				})
			},
			// 重置
			handleReset(name) {
				this.useTemplateId = ''
				this.useExpguideId = ''
				this.useImagePath = ''
				this.guideFilePath = ''
				this.$refs[name].resetFields();
				this.expDoc = '';
				this.expVideo = '';
				this.useTempVisibility = '';
				this.useGuideVisibility = '';
				this.useImageVisibility = '';
				this.useExpDocVisibility = '';
				this.useExpVideoVisibility = '';
				this.useExpGuideVisibility = '',
				this.mergeLabels = [],
				this.addLabelsArr = []
			},
			// 获取场景分类
			classification() {
				return new Promise((resolve,reject) => {
					experType()
					.then((data) => {
						if(data.code == 1) {
							let attribute = data.attribute;
							// console.log('🚀 ~ file: creatExper.vue:1175 ~ .then ~ attribute', attribute)
							this.expClassify = attribute.attribute[0].dictEntryList;
							this.expClassifyLevel1 = attribute.attribute[0].dictEntryList.filter(dict => !dict.parentid);
							this.expClassifyLevel2 = attribute.attribute[0].dictEntryList.filter(dict => dict.parentid);
							resolve(data.attribute);
						}else{
							resolve();
						}
					})
					.catch((err) => {
						resolve();
					});
				})
			},

			// 获取标签
			getSelLabelType () {
				getSelLabelType().then(res => {
					if (res.code == 1) {
						this.expClassifyTag = res.data[0].dictEntryList
						if (this.expClassifyTag.length > 0) {
							this.expClassifyName = this.expClassifyTag.map(item => {
								if (item) {
									return item.dictname
								}
							})
						}
					} else {
						this.$Message.error('获取标签失败，请刷新重试')
					}
				}).catch(error => {
					this.$Message.error({
						content: error,
						duration: 3,
					})
				})
			},
			// 选择工程模板
			toPlateTabs() {
				this.addDeviceModel = true
				this.templateList = []
				let params = {
					pageIndex: this.templatePage,
					pageSize: this.templatePageSize
				}
				let data = {
					name: this.searchTemplateName,
					visibility: this.templateVisibility,
					type: 'project',
				}
				this.proTemLoading = true
				getTemplateData(data,params)
					.then(res => {
						let data = res.data;
						if(data.code === 1) {
							let pateInfo = data.data
							this.templateTotal = Number(pateInfo.total)
							let items = pateInfo.items
							for(let i = 0; i < items.length; i++) {
								items[i].tempUserFlag = false
								if(items[i].id === this.useTemplateId) {
									items[i].tempUserFlag = true
								}
							}
							this.templateList = items
						} else {
							this.templateList = []
							this.templateTotal = 0
						}
						this.proTemLoading = false
					})
					.catch(err => {
						this.proTemLoading = false
					})
			},
			temOnChange(val) {
				this.templatePage = val
				this.toPlateTabs()
			},
			changeTemplate(val) {
				this.templatePage = 1
				this.templateVisibility = val
				this.toPlateTabs()
			},
			searchTemNameBtn(val) {
				this.templatePage = 1
				this.searchTemplateName = this.searchTemNameInput
				this.toPlateTabs()
			},
			refreshTem() {
				this.templatePage = 1
				this.searchTemplateName = ''
				this.searchTemNameInput = ''
				this.templateVisibility = ''
				this.selectProTemModel = ''
				this.toPlateTabs()
			},
			closeDistribution() {
				this.addDeviceModel = false
			},
			chooseTemp(params) {
				if(params.row.tempUserFlag) {
					this.$Message.info({
						content: '已使用该模板！',
						duration: 3,
					})
				} else {
					let _index = params.row._index
					for(let i = 0; i < this.templateList.length; i++) {
						this.templateList[i].tempUserFlag = false
					}
					this.$set(this.templateList[_index], 'tempUserFlag', true)
					this.formValidate.envtempid = params.row.name
					this.useTemplateId = params.row.id
					//存储模板可见范围
					this.useTempVisibility = params.row.visibility
				}
			},
			querytempByID(id) {
				getTempInfpByID(id)
					.then(res => {
						if(res.data.code === 1) {
							this.formValidate.envtempid = res.data.data.name
						}
					})
					.catch(err => {
					})
			},
			// 清除选中的模板
			clearTemp() {
				this.formValidate.envtempid = ''
				this.useTemplateId = ''
			},
			//指导书文件类型
			showGuideBtnFile(){
				this.guideFileModal = true
				let params = {
					page: this.expGuideFilePage,
					rows: this.expGuideFilePageSize,
					order: 'desc',
					sortBy: 'createtime',
				}
				let data = {
					bucket: "docs"
				}
				if(this.shareFileStatus != 'all') {
					data.visibility = this.shareFileStatus
				}
				if($.trim(this.searchGuideFileInput) != '') {
					data.originName = this.searchGuideFileInput
				}
				this.guideFileLoading = true
				getGuideFileData(params)
					.then(data => {
						if(data.code == 1) {
							let attribute = data.attribute;
							let items = attribute.dataList;
							for(let i = 0; i < items.length; i++) {
								items[i].guideUserFlag = false
								if(items[i].guidbookid === this.useExpguideId) {
									items[i].guideUserFlag = true
								}
							}
							this.expGuideList = items
							this.expGuideTotal = attribute.totalCount;
						}
						this.guideLoading = false
					})
					.catch(err => {
						this.guideLoading = false
					})
			},
			// 指导书
			showGuideBtn() {
				this.guideModal = true
				let params = {
					page: this.expGuidePage,
					rows: this.expGuidePageSize,
					order: 'desc',
					sortBy: 'createtime',
					isExpUsed:false //未被使用的指导书
				}
				if(this.shareStatus != 'all') {
					params.ispublic = this.shareStatus
				}
				if($.trim(this.searchGuideInput) != '') {
					params.guidbookname = this.searchGuideInput
				}
				this.guideLoading = true
				getGuideData(params)
					.then(data => {
						if(data.code == 1) {
							let attribute = data.attribute;
							let items = attribute.dataList;
							for(let i = 0; i < items.length; i++) {
								items[i].guideUserFlag = false
								if(items[i].guidbookid === this.useExpguideId) {
									items[i].guideUserFlag = true
								}
							}
							this.expGuideList = items
							this.expGuideTotal = attribute.totalCount;
						}
						this.guideLoading = false
					})
					.catch(err => {
						this.guideLoading = false
					})
			},
			guideOnChange(val) {
				this.expGuidePage = val
				this.showGuideBtn()
			},
			changeType(val) {
				this.expGuidePage = 1
				this.shareStatus = val;
				this.showGuideBtn()
			},
			searchGuideBtn() {
				this.expGuidePage = 1
				this.showGuideBtn()
			},
			refreshFile() {
				if(this.formValidate.customType){//1文件
					this.refreshImg('docs')
				}else{
					this.expGuidePage = 1
					this.searchGuideInput = ''
					this.shareStatus = 'all'
					this.showGuideBtn()
				}
				
			},
			closeGuideModalBtn() {
				this.guideModal = false
			},
			chooseGuide(params) {
				if(params.row.guideUserFlag) {
					this.$Message.info({
						content: '已使用该指导书！',
						duration: 3,
					})
				} else {
					let _index = params.row._index
					for(let i = 0; i < this.expGuideList.length; i++) {
						this.expGuideList[i].guideUserFlag = false
					}
					this.$set(this.expGuideList[_index], 'guideUserFlag', true)
					this.formValidate.guide = params.row.guidbookname
					this.useExpguideId = params.row.guidbookid
					this.preGuideIdData = this.useExpguideId;
				  this.preGuideNameData = this.formValidate.guide;
					//存储指导书可见范围
					this.useGuideVisibility = params.row.ispublic
				}
			},
			queryGuideByID(id) {
				getGuideInfoByID_new(this.ecid, id)
					.then(data => {
						if(data.code === 1) {
							let guideInfo = data.attribute.data
							this.useExpguidePublic = guideInfo.ispublic
							this.formValidate.guide = guideInfo.guidbookname
						}
					})
					.catch(err => {
					})
			},
			// 清除选中的指导书
			clearGuide() {
				this.formValidate.guide = ''
				this.useExpguideId = '';
				if(this.formValidate.customType){
					if(this.preGuideIdFile){
						this.preGuideIdFile = '';
						this.preGuideNameFile = ''
					}
				}else{
					if(this.preGuideIdData){
						this.preGuideIdData = '';
						this.preGuideNameData = ''
					}
				}
			},
			getShowVideoCol() {
				if(this.selectType != 'images') {
					return this.videoCol.filter(col => col.key != 'path');
				} else {
					return this.videoCol;
				}
			},
			// 选择图片
			getVideoList(type) {
				this.imgModal = true
				this.selectType = type;
				if(type == 'images') {
					this.imgDrawerTitle = '封面图片';
					this.imgDrawerSearchPlaceholder = '图片名称';
				} else if(type == 'videos') {
					this.imgDrawerTitle = '视频';
					this.imgDrawerSearchPlaceholder = '视频名称';
				}else if(type == 'docs'){
					this.imgDrawerTitle = '指导书';
					this.imgDrawerSearchPlaceholder = '指导书名称';
				}else {
					this.imgDrawerTitle = '课件';
					this.imgDrawerSearchPlaceholder = '课件名称';
				}
				let params = {
					pageIndex: this.videoPage,
					pageSize: this.videoPageSize
				}
				let data = {
					bucket: type, //images/courseware/videos/docs
				}
				if($.trim(this.searchFileName) != '') {
					data.originName = $.trim(this.searchFileName)
				}
				if($.trim(this.searchFilePublic) != ''){
					data.visibility = $.trim(this.searchFilePublic)
				}
				this.fileListLoading = true
				getFilesData(params, data)
					.then((res) => {
						if(res.data.code == 1) {
							let attribute = res.data.data;
							let items = attribute.list;
							this.videoTotal = attribute.total;
							for(let i = 0; i < items.length; i++) {
								items[i].imgUseFlag = false
								if((items[i].path === this.useImagePath && type == 'images') ||
									(items[i].path === this.expDoc.path && type == 'courseware') ||
									(items[i].path === this.expVideo.path && type == 'videos') ||
									(items[i].path === this.useExpguideId && type == 'docs')) {
									items[i].imgUseFlag = true
								}
							}
							this.videoList = items;
						}
						this.fileListLoading = false
					})
					.catch((err) => {
						this.fileListLoading = false
					})
			},
			videoOnChange(val) {
				this.videoPage = val;
				// if(this.formValidate.customType){//前端分页
				// 	this.videoList = this.fontPaging(this.videoCopys,{pageIndex:this.videoPage,pageSize:this.videoPageSize})
				// }else{
				// 	this.getVideoList(this.selectType);
				// }
				this.getVideoList(this.selectType);
			},
			searchFile(val) {
				this.videoPage = 1
				this.getVideoList(this.selectType);
			},
			refreshImg(type) {
				this.videoPage = 1
				this.searchFileName = ''
				this.searchFilePublic = ''
				const curType = type || this.selectType
				this.getVideoList(curType)
			},
			closeImgModalBtn() {
				this.imgModal = false
			},
			checkInfo(params) {
				let path = params.row.path;
				if(params.row.originName.endsWith('.md')){
					let href = this.$router.resolve({
						name:'mdPreview',
						query:{
							path:path,
							name:params.row.originName
						}
					}).href;
					window.openTrain(href,'_blank')
				}else{		
					window.openTrain(`/api/minio/filePreview?path=${path}`);
				}
			},
			chooseImg(params) {
				if(this.selectType == 'images') {
					if(params.row.imgUseFlag) {
						this.$Message.info({
							content: '已使用该图片！',
							duration: 3,
						})
					} else {
						let _index = params.row._index
						for(let i = 0; i < this.videoList.length; i++) {
							this.videoList[i].imgUseFlag = false
						}
						this.$set(this.videoList[_index], 'imgUseFlag', true)
						this.formValidate.topology = params.row.originName
						this.useImagePath = params.row.path
						//存储图片可见范围
						this.useImageVisibility = params.row.visibility
					}
				} else if(this.selectType == 'courseware') {
					if(params.row.imgUseFlag) {
						this.$Message.info({
							content: '已使用该课件！',
							duration: 3,
						})
					} else {
						let _index = params.row._index
						for(let i = 0; i < this.videoList.length; i++) {
							this.videoList[i].imgUseFlag = false
						}
						this.$set(this.videoList[_index], 'imgUseFlag', true)
						this.expDoc = params.row;
						//存储课件可见范围
						this.useExpDocVisibility = params.row.visibility
					}
				} else if(this.selectType == 'videos') {
					if(params.row.imgUseFlag) {
						this.$Message.info({
							content: '已使用该视频！',
							duration: 3,
						})
					} else {
						let _index = params.row._index
						for(let i = 0; i < this.videoList.length; i++) {
							this.videoList[i].imgUseFlag = false
						}
						this.$set(this.videoList[_index], 'imgUseFlag', true)
						this.expVideo = params.row;
						//存储视频可见范围
						this.useExpVideoVisibility = params.row.visibility
					}
				}else if(this.selectType=='docs'){
					//guideFilePath
					if(params.row.imgUseFlag) {
						this.$Message.info({
							content: '已使用该指导书文件！',
							duration: 3,
						})
					} else {
						let _index = params.row._index
						for(let i = 0; i < this.videoList.length; i++) {
							this.videoList[i].imgUseFlag = false
						}
						this.$set(this.videoList[_index], 'imgUseFlag', true)
						this.formValidate.guide = params.row.originName
						this.useExpguideId = params.row.path
						this.preGuideIdFile = this.useExpguideId;
						this.preGuideNameFile = this.formValidate.guide;
						//存储指导书可见范围
						this.useGuideVisibility = params.row.visibility
					}
				}
			},
			// 清空选择的图片
			clearImg() {
				this.formValidate.topology = ''
				this.useImagePath = ''
			},
			//清除选中的课件
			clearDoc() {
				this.delDoc = this.expDoc;
				this.expDoc = ''
			},
			//清除选中的视频
			clearVideo() {
				this.delVideo = this.expVideo;
				this.expVideo = ''
			},
			handleImage(logo) {
				let src = ''
				if(logo) {
					if(logo.indexOf('Learn') > -1) {
						src = logo
					} else {
						src = `/Learn/${logo}`
					}
				} else {
					src = this.defaultImg
				}
				return src
			},
			//查询课件绑定视频和课件信息 
			getExpVideoOrDocList() {
				this.expVideo = '';
				this.expDoc = '';
				this.curSaveExpDoc = '';
				this.curSaveExpVideo = '';
				getVideoDetail(this.ecid).then(data => {
						if(data.code == 1) {
							this.videoLists = data.attribute.data;
							let eduVideoList = this.videoLists.filter(file => file.srctype == 'EduVideo');
							let eduPdfList = this.videoLists.filter(file => file.srctype == 'EduPdf');
							if(eduVideoList.length > 0) {
								this.curSaveExpVideo = eduVideoList[0]; //当前保存的
								this.expVideo = eduVideoList[0]; //当前选择的
								this.expVideo.originName = this.expVideo.srcname;
								this.expVideo.path = this.expVideo.srcpath;
								this.expVideo.id = this.expVideo.fileId;
							}
							if(eduPdfList.length > 0) {
								this.curSaveExpDoc = eduPdfList[0]; //当前保存的
								this.expDoc = eduPdfList[0]; //当前选择的
								this.expDoc.originName = this.expDoc.srcname;
								this.expDoc.path = this.expDoc.srcpath;
								this.expDoc.id = this.expDoc.fileId;
							}
						} else {
							this.expVideo = '';
							this.expDoc = '';
						}
					})
					.catch(err => {
						this.expVideo = '';
						this.expDoc = '';
					})
			},
			async saveExperOrDocInfo(type) {
					let formData = {
						creator: this.USER_ID,
						ecid: this.ecid,
						ispublic: 1,
						createtime: '',
						downloadtimes: 0,
						isdownload: 1,
						srclocation: 1
					};
					if(type == 'EduVideo') {
						formData.srcpath = this.expVideo.path;
						formData.srcname = this.expVideo.originName;
						formData.fileId = this.expVideo.id;
						formData.duration = this.expVideo.duration || 0;
						formData.srctype = type;
						let hasAdd = this.curSaveExpVideo && type == 'EduVideo'
						let data = await this.addOrModifyExpVideoOrDoc(hasAdd,formData,type);
						return data
					} else if(type == 'EduPdf') {
						formData.srcpath = this.expDoc.path;
						formData.srcname = this.expDoc.originName;
						formData.fileId = this.expDoc.id;
						formData.srctype = type;
						let hasAdd = this.curSaveExpDoc && type == 'EduPdf'
						let data = await this.addOrModifyExpVideoOrDoc(hasAdd,formData,type);
						return data
					}
			},
			addOrModifyExpVideoOrDoc(hasAdd,formData,type){
				return new Promise(resolve => {
					if(!hasAdd) {
						addExpVideo(formData).then(data => {
							if(data.code == 1) {
								resolve(1);
							} else {
								resolve(0);
							}
						}).catch(err => {
							resolve(0);
						})
					} else {
						let id = '';
						if(type == 'EduVideo'){
							id = this.curSaveExpVideo.srcid;
						}else if(type == 'EduPdf'){
							id = this.curSaveExpDoc.srcid;
						}
						modifyExpVideo(id,formData).then(data => {
							if(data.code == 1) {
								resolve(1);
							} else {
								resolve(0);
							}
						})
						.catch(err => {
							resolve(0);
						})
					}
				})
			},
			changeExpType() {
				this.expDoc = '';
				this.expVideo = '';
				this.formValidate.guide = ''
				this.useExpguideId = ''
				this.formValidate.envtempid = ''
				this.useTemplateId = ''
				this.formValidate.topology = ''
				this.useImagePath = ''
			},
			changeDirection(val){
				if(val == 'All'){
					this.expClassifyLevel2 = this.expClassify.filter(dict => dict.parentid);
				}else{
					this.expClassifyLevel2 = this.expClassify.filter(dict => dict.parentid == val);
				}
				this.formValidate.type = '';
			},
			clearExpVideo(){
            	return new Promise(resolve => {
            		clearExpVideo(this.ecid).then(data => {
            			if(data.code == 1){
            				resolve(1);
            			}else{
            				resolve(0);
            			}
            		}).catch(error => {
            			resolve(0);
            		})
            	})
            },
			handlePublic(val){
                let obj = {
                    text:'',
                    color:'#8d95a6'
                }
                switch (val){
                    case 'person':
                    case 0:
                    case '0':
                        return obj = {
                            text:'个人',
                            color:'rgb(255, 165, 0)',
                        }
                        break;
                    case 'company':
                    case 1:
                    case '1':
                        return obj = {
                            text:'单位',
                            color:'rgb(50, 205, 50)',
                        }
                        break;
                    case 'system':
                    case 2:
                    case '2':
                        return obj = {
                            text:'系统',
                            color:'rgb(65, 105, 225)',
                        }
                        break;
                  case 'range':
                  case 3:
                  case '3':
                    return obj = {
                      text:'平台',
                      color:'#ff61f4',
                    }
                    break;
                }
            },
            changePublic(val){
				if(val == 1 && this.isCreate){
					if(this.useExpDocVisibility == 'private'){
						this.expDoc = '';
					}
					if(this.useExpVideoVisibility == 'private'){
						this.expVideo = '';
					}
					if(this.useGuideVisibility === 0||this.useExpGuideVisibility=='private'){
						this.formValidate.guide = ''
						this.useExpguideId = ''
						this.guideFilePath = ''
					}
					if(this.useTempVisibility == 'private'){
						this.formValidate.envtempid = ''
						this.useTemplateId = ''
					}
					if(this.useImageVisibility == 'private'){
						this.formValidate.topology = ''
						this.useImagePath = ''
					}
				}
            }
		}
	}
</script>
<style scoped>
.width_150{
    max-width: 150px;
    overflow: hidden;
}

.width_150.ivu-tag >>> .ivu-tag-text{
    max-width: 100px !important;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    display: inline-block;
}
.width_150.ivu-tag>>> .ivu-icon-ios-close {
    position: relative;
    top: -9px !important;
}

.add_icon{
	position: absolute;
	right: -23px;
	top:8px;
	cursor:pointer;
}
	.page-content {
		background-color: var(--card-body-bgcolor);
		border-radius: 10px;
	}
	
	.img-header {
		display: flex;
		justify-content: space-between;
		padding: 20px 20px 0 20px;
	}
	
	.addressIcon {
		display: inline-block;
		height: 14px;
		width: 12px;
		background: url("../../assets/globalIcon/addressIcon.png") no-repeat center;
		background-size: 100% 100%;
		margin-bottom: -1px;
	}
	
	.content-wrap {
		overflow-x: hidden;
		overflow-y: auto;
		padding: 0 20px;
		height: calc(100% - 96px);
	}
	
	.chose-wrap {
		display: flex;
		justify-content: space-between;
		padding: 3px 8px;
		background-color: var(--table-tr-hover-color);
		align-items: center;
		margin-top: 10px;
	}
	
	.chose-name {
		width: 300px;
		display: inline-block;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	.chose-s-icon {
		width: 15px;
		height: 17px;
		display: inline-block;
		margin-bottom: 1px;
		margin-right: 10px;
	}
	
	.chose-s2-icon {
		width: 13px;
		height: 15px;
		display: inline-block;
		margin-bottom: 1px;
		margin-right: 10px;
	}
	
	.deviceDrawer {
		position: relative;
	}
</style>
<style>
	.deviceDrawer .ivu-drawer-body {
		overflow: inherit;
	}
	
	.content-wrap .ivu-form-item {
		margin-bottom: 20px;
	}
	
	.template-lable .ivu-form-item-label::before {
		content: '*';
		display: inline-block;
		margin-right: 4px;
		line-height: 1;
		font-family: SimSun;
		font-size: 12px;
		color: #ed4014;
	}
</style>